import React, { PropTypes } from 'react'
import { connect } from 'react-redux'
import { Menu, Icon } from 'antd'
import { Link } from 'react-router'
var classNames = require('classnames');

import './index.less'
const defaultProps = {
    items: [],
    currentIndex: 0
};
const propTypes = {
    items: PropTypes.array,
    location: PropTypes.object,
    currentIndex: PropTypes.number
};

class Sidebar extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            open:false
        }
    }

    onClickMenuHasSub(){
        this.setState({
            open:!this.state.open
        });
    }
    renderUserSiderBar(menu){
        let {userInfo} = this.props.app;
        let {permission} = userInfo.role;
        if(!userInfo.creator && !menu.unless && !permission[menu.title]) return null;
        let pathname = this.context.location.pathname;
        return (
            <div className="menu">
                <h2>
                    <span>{menu.title}</span>
                </h2>
                <hr className="line-mod"/>
                <dl className="menu-list">
                    <dd>
                        {
                            menu.items.map((item,i)=>{
                                if(!userInfo.creator && !item.unless && !permission[menu.title][item.title] ) return null;
                                let className = classNames("menu-lv2",{ act: pathname.indexOf(item.link) === 0})
                                return (
                                    <Link key={i} to={item.link} className={className}>
                                        <span>{item.title}</span>
                                    </Link>
                                )
                            })
                        }
                    </dd>
                </dl>
            </div>
        )
    }

    render(){
        let menus = this.props.app.config.menus.siderBar;
        const pathname = this.context.location.pathname;
        for(let path in menus){
            let menu = menus[path];
            if(pathname.indexOf(path) === 0){
                return this.renderUserSiderBar(menu);
            }
        }
        return null;
    }
}

Sidebar.propTypes = propTypes;
Sidebar.defaultProps = defaultProps;
Sidebar.contextTypes = {
    location:PropTypes.object
}
export default connect(
    state => {
        return {
            app:state.app
        }
    },
    dispatch => {
        return {
        }
    }
)(Sidebar);